<template>
    <div class="breadcrumb-container">
        <el-breadcrumb separator="/">
            <TransitionGroup name="breadcrumb">
                <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path" :to="item.path">
                    <span v-if="item.meta?.noRedirect === 'noRedirect' || index === breadcrumbList.length - 1">{{item.meta?.title}}</span>
                    <RouterLink v-else :to="item.path">{{ item.meta?.title }}</RouterLink>
                </el-breadcrumb-item>
            </TransitionGroup>
        </el-breadcrumb>
    </div>
</template>

<script setup lang='ts'>
import { ref, watch } from 'vue';
import { RouteRecordRaw, RouterLink, useRoute } from 'vue-router';
const route = useRoute()
let breadcrumbList = ref<RouteRecordRaw[]>([])

// 监听路由变化
watch(route, () => {
    getBreadcrumb()
})

// 获取面包屑列表
const getBreadcrumb = () => {
    breadcrumbList.value = route.matched.filter(item => {
        if (item.meta && item.meta.title) return true
    })
}
getBreadcrumb()
</script>

<style scoped>
</style>